<template>
  <div class="recommend" v-loading:[loadingText]="loading">
    <div class="slider-wrapper">
      <van-swipe
        class="my-swipe"
        :autoplay="3000"
        indicator-color="white"
        lazy-render
      >
        <van-swipe-item
          v-for="item in sliders"
          :key="item.id"
          @click="clickSwipeItem(item)"
        >
          <a :href="item.link">
            <van-image :src="item.pic" fit="fill" />
          </a>
        </van-swipe-item>
        <template #indicator="{ active }" v-if="sliders.length > 0">
          <div class="custom-indicator">
            {{ active + 1 }}/{{ sliders.length }}
          </div>
        </template>
      </van-swipe>
    </div>
    <div class="hot_warp">
      <div class="hot_title" v-show="!loading">热门歌手推荐</div>
      <div class="hot_list">
        <div
          class="list_item"
          v-for="item in hostList"
          :key="item.id"
          @click="clickHotItem(item)"
        >
          <!-- <lazy-component> -->
          <van-image :src="item.pic" fit="fill" />
          <!-- </lazy-component> -->

          <div class="right">
            <p>{{ item.username }}</p>
            <p>{{ item.title }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getRecommend } from '@/service/recommend'
import { setStorage } from '@/utils/storage'
import { ALBUM_KEY } from '@/assets/js/constant'
export default {
  name: 'recommend',
  components: {},
  props: {},
  data() {
    return {
      sliders: [],
      hostList: [],
      loadingText: '正在加载...'
    }
  },
  methods: {
    clickHotItem(item) {
      setStorage(ALBUM_KEY, item)
      this.$router.push({
        name: 'album',
        params: item
      })
    },
    clickSwipeItem(item) {
      console.log(item.link)
    }
  },
  computed: {
    loading() {
      return !this.sliders.length && !this.hostList.length
    }
  },
  watch: {},
  async mounted() {
    const res = await getRecommend()
    this.sliders = res.sliders
    this.hostList = res.albums
    console.log(res)
  }
}
</script>
<style lang="scss" scoped>
.recommend {
  width: 100vw;
  // min-height: calc(100vh-88px);
  position: relative;
  .slider-wrapper {
    width: 100%;
    height: 150px;
    .my-swipe {
      width: 100%;
      height: 150px;
      .van-swipe-item {
        color: #fff;
        font-size: 20px;
      }
      .custom-indicator {
        position: absolute;
        right: 5px;
        bottom: 5px;
        padding: 2px 5px;
        font-size: 12px;
        background: rgba(0, 0, 0, 0.1);
      }
    }
  }
  .hot_warp {
    .hot_title {
      width: 100%;
      height: 65px;
      text-align: center;
      line-height: 65px;
      font-size: 14px;
      color: $color-theme;
    }
    .hot_list {
      .list_item {
        display: flex;
        align-items: center;
        padding: 0 20px 20px 20px;
        .van-image {
          width: 60px;
          height: 60px;
          margin-right: 20px;
        }
        .right {
          height: 50px;
          font-size: 16px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        }
      }
    }
  }
}
</style>
